<template>
  <div class="searchRecommend" v-if="recommend">
    <div
      class="searchRecommendItem"
      v-for="(item, index) in recommend"
      :key="index"
      @click="toSearchRecommend(index)"
    >
      <div class="icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
      <div class="title">{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["recommend"],
  methods: {
    toSearchRecommend(index) {
      if (index <= 1) {
        // console.log(index);
        let arr = ["person", "company"];
        let role_type = arr[index];
        this.$router.push({ path: "/searchRecommend", query: { role_type } });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.searchRecommend {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 40px;

  .searchRecommendItem {
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      box-shadow: 0px 0px 10px -6px black;
      background-size: 54%;
      background-position: center center;
      background-repeat: no-repeat;
      margin-bottom: 10px;
    }

    .title {
      font-size: 13px;
    }
  }
}
</style>
